.#{$namespace}sakai-preferences {

  .blocked {
    opacity: 0.2;
    filter: alpha( opacity = 20);
    cursor:text !important;
    outline:none;
  }
  .blocked img {
    filter: alpha( opacity = 20);
  }

  .buttonlike{
    color: #ffffff;
    background-color: #222222;
    padding: 5px 10px 5px 10px;
    width: 100px;
  }

  .hiddenlike{
    color: #ffffff;
    background-color: #444444;
    padding: 5px 10px 5px 10px;
    width: 100px;
  }

  .layoutReorderer-container {
    width:95%;
    margin: 0 auto;
    overflow:auto;
  }

  .layoutReorderer-container:focus{
    outline: none; /* overrides fss-reset.css */
  }

  .layoutReorderer-module,
  .layoutReorderer-locked  {
    margin: 5px;
    background-color: #fff;
  }

  .layoutReorderer-module-dragbar {
    /* dragbar is the bar on top of each module */
    cursor: move;
    height: 20px;
    padding:3px 5px;
    margin:0;
    outline:1px solid #555;
    color:#000;
  }
  .colTitle h4{
    padding:5px 0;
    color:#000;
    background:#fff
   }
  .colTitle {
    background-color:#fff;
    margin:-18px 0px 10px 0px;
   }
  .layoutReorderer-locked .layoutReorderer-module-dragbar {
    /* Locked module */
    height: 20px;
    padding:3px 5px;
    cursor: default;
    outline:none;
    background-color: #fff;
    &::after {
      content: "\F46a"; /* bi-lock */
      font-family: bootstrap-icons;
      position: absolute;
      right: 5px;
    }
  }

  /*
   * module-content is the box below the dragbar, which contains the
   * actual content of the module
   */
  .layoutReorderer-module-content {
    padding: 6px;
    width: 95%;
    overflow: auto;
  }

  .layoutReorderer-module-content img {
    border: 1px solid #afafaf;
    float:left;
    margin-right: 10px;
    width: 30%;
  }

  .layoutReorderer-movable-hover, .layoutReorderer-movable-selected{
    outline: 2px solid #000;
  }

  .layoutReorderer-list-emphasis {
    font-weight: bold;
  }

  /**
   * Interaction styling.
   */

  .layoutReorderer-avatar {
    background-color:#9fff9f;
    outline: 2px solid #000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* ie opacity fix */
  }
  .layoutReorderer-avatar .layoutReorderer-module-dragbar,
  .layoutReorderer-avatar .layoutReorderer-module-content {
    /* hide contents of the module's avatar, while dragging. */
    visibility: hidden;
  }

  .layoutReorderer-movable-dragging {
    margin: 6px 2px 6px 12px;
  }

  .layoutReorderer-movable-mousedrag {
    /* hide the original module while being dragged. */
    display:none;
  }

  .layoutReorderer-dropMarker {
    background-color: #9f9;
    &::before {
      content: "\F138"; /* bi-chevron-right */
      font-family: bootstrap-icons;
      position: absolute;
      left: 5px;
    }
    height: 20px;
    padding: 0 0 0 0;
    margin-left: 1em;
    margin-right: 1em;
  }

  .layoutReorderer-dropWarning {
    border: 3px solid black;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: left center;
    display: none;
    padding: 5px 30px;
    z-index: 10;
    width:250px;
  }

  .col1, .col2 {
    width:45%;
    float:left;
    margin:0;
    padding:5px;
    background:#fff;
  }
  .siteLabel {
    width: 85%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    float: left;
    margin-top:2px;
    text-overflow: ellipsis
  }
  .siteSelected {
    background: #eee
  }
  .checkBoxContainer {
    float:right;
    width:20px;
  }
  .selectSiteCheck {
    cursor:default;
  }
  #movePanel {
    position:absolute;
    top:-1000px;
    width: 75px;
    height:75px;
    border:1px solid #ccc;
    background: #eee;
    padding:3px;
    -webkit-box-shadow: 4px 3px 10px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 4px 3px 10px rgba(50, 50, 50, 0.75);
    box-shadow: 4px 3px 10px rgba(50, 50, 50, 0.75);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  #movePanel a {
    text-decoration: none;
  }
  #movePanelLeftRight {
    height:25px;
    padding:0;
  }
  #movePanelLeft, #movePanelLeftDummy,#movePanelRight, #moveRightDummy, #movePanelTop, #movePanelBottom {
    display:block;
  }
  #movePanelLeft, #movePanelLeftDummy {
    float:left;
  }
  #movePanelRight, #movePanelRightDummy {
    float:right;
  }
  #movePanelTop, #movePanelBottom,#movePanelTopDummy, #movePanelBottomDummy  {
    text-align:center;
    width:100%;
    height:25px;
  }
  #reorderCol1 > span, #reorderCol2 > span, #reorderCol3 > span {
    min-height: 350px;
    height: 350px;
  }
  #reorderCol1 > span {
    min-height: 320px;
    height: 320px;
  }
  #reorderCol3 > span {
    /*
     * This was intended to provide scrollbars if the lists went
     * over a certain height - but really complicated the
     * drag and drop and keyboard moves.
    */
    display:block;
    outline: 1px solid #ccc;
    overflow: auto
  }

  .term-section {
    margin-top: 3em;
    width: 300px;
  }

  .manage-hidden-entry h3 {
    margin: 0;
  }

  .manage-hidden-entry {
    width: 300px;
    padding: 0.1em 0.5em 0.1em 0;
    vertical-align: middle;
  }

  .manage-hidden-entry.term-entry.entry-hidden .title {
    color: #aaa;
  }

  .manage-hidden-entry.site-entry.entry-hidden {
    background-color: #aaa;
    border-color: #888;
    color: #e7e7e7;
  }

  .manage-hidden-entry .title {
    display: inline-block;
    width: 230px;
    overflow: hidden;
    vertical-align: middle;
  }

  .site-entry {
    border: 1px solid #dfdfdf;
    background-color: #fff;
    margin-top: 5px;
    margin-bottom: 5px;
    padding-left: 0.5em;
  }

  .site-entry-pin {
    margin-right: 5px;
    visibility: hidden;
  }

  .site-entry-pin:before {
    font-style: normal;
    content: '\f4ec';
    color: #ababab;
  }

  .site-entry.favorite-site .site-entry-pin {
    visibility: visible;
  }

  .manage-hidden-entry .hidden-checkbox {
    float: right;
    margin-right: 5px;
  }

  #sitesByTerm {
    overflow: hidden;
  }

  @media screen and (max-width: 1200px) {
    #sitesByTerm .leftPane {
      display: block;
      width: 100%;
    }

    #sitesByTerm .rightPane {
      display: block;
      width: 100%;
    }
  }

  @media screen and (min-width: 1200px) {
    #sitesByTerm .leftPane {
      display: inline-block;
      width: 49%;
      float: left;
      margin-right: 1%;
    }

    #sitesByTerm .rightPane {
      display: inline-block;
      width: 49%;
      float: left;
    }
  }

  .submit-buttons {
    width: 100%;
    clear: both;
  }

  select.multiLine {
    background: none;
  }

  .prefs-themeSelection {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .addRadioLabelPadding label {
    padding-left: 4px;
  }

  .btn-transparent {
    font-size: calc(1.275rem + 0.3vw);
  }
}
